<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>村级台账配置</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <style>
    #field_config .el-checkbox {
      width: 300px;
      margin-right: 0;
      margin-bottom: 10px;
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加自定义表单':action=='Modify'?'修改自定义表单':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'three_affairs_disclosure', 'form': 'dataForm' ,'primary_key':'Affairs_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">表单信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="2" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">文件名称</div>
              </template>
              <el-form-item prop="Xlsx_File_Name" :rules="[{ required: true, message: '请输入文件名称标题', trigger: 'blur' }]">
                <el-input v-model="dataForm.Xlsx_File_Name" class="borderless-input" placeholder="请输入文件名称标题" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">上报科室</div>
              </template>
              <el-form-item prop="Department_SerialNumber" :rules="[{ required: true, message: '请选择上报科室', trigger: 'blur' }]">
                <el-cascader filterable style="width: 100%;" placeholder="请选择上报科室" v-model="dataForm.Department_SerialNumber" :options="government_agencies" class="borderless-input"
                  :props="{ emitPath: false, value: 'Government_Agencies_SerialNumber',  label: 'Agensies_Name', children: 'children', checkStrictly:true}"
                  clearable></el-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">默认运行周期</div>
              </template>
              <el-form-item prop="Operating_Cycle" :rules="[{ required: true, message: '请选择默认运行周期', trigger: 'change' }]">
                <el-select clearable v-model.trim="dataForm.Operating_Cycle" placeholder="请选择默认运行周期" filterable
                  style="width: 100%">
                  <el-option v-for="(item,index) in base_cycle" :key="index" :label="item.Cycle"
                    :value="item.Cycle_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">文件来源</div>
              </template>
              <el-form-item prop="Xlsx_File_Source" :rules="[{ required: true, message: '请输入文件来源', trigger: 'blur' }]">
                <el-input v-model="dataForm.Xlsx_File_Source" class="borderless-input" placeholder="请输入文件来源" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">村级台账类型</div>
              </template>
              <el-form-item prop="Xlsx_File_Source" :rules="[{ required: true, message: '请选择村级台账类型', trigger: 'change' }]">
                <el-select clearable v-model.trim="dataForm.Xlsx_Table_Type" placeholder="请选择村级台账类型" filterable
                  style="width: 100%">
                  <el-option v-for="(item,index) in xlsx_table_type" :key="index" :label="item.Xlsx_Table_Type"
                    :value="item.Xlsx_Table_Type_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div id="ChildTable">
          <el-row :gutter="20">
            <el-col :span="18">
              <div class="table_titel">
                <div class="titel">自定义列表
                  <span style="font-weight: 500; color: #b1b1b1;">共({{xlsx_config.length}}个)</span>
                </div>
              </div>
              <div style="border: 1px solid #ebeef5;height: calc(100vh - 368px); overflow: auto;">
                <el-checkbox-group id="field_config" v-model="checkList">
                  <el-checkbox v-for="(item,index) in xlsx_config" :key="item.COLUMN_NAME"
                    :label="item">{{item.COLUMN_COMMENT}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="table_titel">
                <div class="titel">当前选定的字段
                  <span style="font-weight: 500; color: #b1b1b1;">共({{checkList.length}}个)</span>
                </div>
              </div>
              <div style="border: 1px solid #ebeef5;height: calc(100vh - 368px); overflow: auto;">
                <div style="display: flex; flex-direction: column;padding-left: 10px;">
                  <div class="el-checkbox">
                    <span class="checkbox__label">拖到换位</span>
                  </div>
                  <div id="Sortable">
                    <div class="el-checkbox" style="display: flex; align-items: center;"
                      v-for="(item,index) in checkList" :key="item.COLUMN_NAME">
                      <el-icon style="transform: rotate(90deg);"><More-Filled /></el-icon>
                      <span class="checkbox__label">{{item.COLUMN_COMMENT}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/Sortable.min.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add.js"></script>

</html>